<template>
    <a-sub-menu v-if="hasSubMenu" :key="menu.name">
        <template #icon>
            <aside-menu-icon :icon="menu.icon" class="icon-style" />
        </template>
        <template #title>{{ menu.title }}</template>
        <aside-sub-menu v-for="item in menu.children" :key="item.name" :menu="item" />
    </a-sub-menu>
    <a-menu-item v-else :key="menu.name">
        <template #icon>
            <aside-menu-icon :icon="menu.icon" class="icon-style" />
        </template>
        <span>{{ menu.title }}</span>
    </a-menu-item>
</template>

<script setup lang="ts">
    import { computed } from 'vue'
    import { AsideMenuIcon } from './AsideMenuIcon'

    const props = defineProps<{
        menu: any
    }>()

    const hasSubMenu = computed(() => {
        return props.menu.children && props.menu.children.length > 0
    })
</script>
<style scoped>
.icon-style {
  width: 14px;
  display: inline-flex;
  height: 14px;
}
</style>
